<template>
<!-- 登陆表单的容器 -->
    <div class="login_container">
        <!-- 登陆区域 -->
        <div class="login_box">
            <!-- 头像 -->
           <div class="avatar_box">
               <img src="../assets/img/4.gif"/>
           </div>
            <!-- 表单 -->
  <el-form :model="loginForm" :rules="rules" ref="loginForm"  label-width="0px" class="demo-loginForm">
  <el-form-item prop="userName">
  <el-input v-model="loginForm.userName" prefix-icon="el-icon-user-solid"></el-input>
  </el-form-item>
  <el-form-item prop="password">
  <el-input v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
  </el-form-item>
     <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
        >
         <!-- @keyup.enter.native="handleLogin" -->
          <svg-icon
            slot="prefix"
            icon-class="validCode"
            class="el-input__icon input-icon"
          />
        </el-input>
        <!-- <div class="login-code">
          <img :src="codeUrl" @click="getCode" />
        </div> -->
      </el-form-item>
   <el-form-item class="login_btn">
    <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
    <el-button @click="resetForm('loginForm')">重置</el-button>
  </el-form-item>
  </el-form>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        userName: '',
        password: '',
        code: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      }
    }
  },
  //    created () {
  //     this.getCode()
  //   },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/main')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.login_container{
    height: 100%;
    background-color: aqua;
}
.login_box{
    width: 390px;
    height: 300px;
    background-color: rgb(229, 233, 233);
    border-radius: 3px;
    position:absolute ;
    left:40%;
    top: 40%;
    transform: translate(-20%,-20%);

    .avatar_box{
        width: 100px;
        height: 100px;
        border:1px solid #eeeeee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 2px 12px 0 rgba(226, 223, 223, 0.1);
        margin: -65px auto;
        background-color: #FFFFFF;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: bisque;
        }
    }
    .demo-loginForm{
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 0px 20px;
        box-sizing: border-box;
        .login_btn{
            display: flex;
            justify-content: flex-end;
        }
    }

}

</style>
